<template>
    <el-dialog :title="isEdit?'编辑作业人员管理':'新增作业人员管理'" :visible.sync="dialogForm" width="720px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="add-form" label-width="110px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="作业人员名称" prop="resourceName">
                        <el-input v-if="!isEdit" style="width: 220px" placeholder="点击按钮选择" v-model="form.resourceName" :disabled="true" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="handleSelect"></el-button>
                        </el-input>
                        <el-input v-model="form.resourceName" :disabled="isEdit" v-if="isEdit"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="作业人员账号" prop="userName">
                        <el-input v-model="form.userName" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所属单位" prop="orgId">
                        <auto-search-org :name="form.orgName" :disabled="true"></auto-search-org>
                        <!-- {{$store.state.user.currentUser.org.name}} -->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属部门" prop="deptId">
                        <search-dept :disabled="true" :name="form.deptName"></search-dept>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所属作业班组" prop="workTeamName">
                        <auto-search-resource searchType="JOB_ZY"
                                              searchName="resourceName"
                                              v-model="form.workTeamName"
                                              :deptId="form.deptId"
                                              :disabled="!form.deptId"
                                              @matchRecord="item=>{form.workTeamId=item.id;form.workTeamName=item.resourceName}"></auto-search-resource>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属作业工种" prop="professionName">
                        <auto-search-resource searchType="JOB_RY"
                                              searchName="resourceName"
                                              v-model="form.professionName"
                                              :deptId="form.deptId"
                                              :disabled="!form.deptId"
                                              @matchRecord="item=>{form.professionId=item.id;form.professionName=item.resourceName}"></auto-search-resource>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="职务" prop="postName">
                        <auto-search-dic @select="v=>form.postCode=v"
                                         @selectId="v=>form.postId=v"
                                         @selectName="v=>form.postName=v"
                                         :name="form.postName"
                                         code="JOB_ZW"></auto-search-dic>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <!--<el-col :span="12">-->
                    <!--<el-form-item label="是否计件" prop="pieceReckon">-->
                        <!--<el-radio v-model="form.pieceReckon" :label="true">是</el-radio>-->
                        <!--<el-radio v-model="form.pieceReckon" :label="false">否</el-radio>-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
                <el-col :span="12">
                    <el-form-item label="是否有效" prop="valid">
                        <el-radio v-model="form.valid" :label="true">是</el-radio>
                        <el-radio v-model="form.valid" :label="false">否</el-radio>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注" prop="resourceDescribe">
                        <el-input type="textarea" :rows="3" style="width: 560px" placeholder="请输入内容"
                                  :maxLength="$maxLength"
                                  v-model="form.resourceDescribe"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
        <select-person ref="selectPerson" @select="handleSelectPerson"></select-person>
    </el-dialog>
</template>

<script>
    import { addOperator, updateOperator } from "@/api/baseResource/baseResource";
    import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
    import searchDept from '@/components/autocomplete/autoSearchDept'
    import autoSearchDic from '@/components/autocomplete/autoSearchDic'
    import selectPerson from './selectPerson'
    import autoSearchResource from '@/components/autocomplete/autoSearchResource'
    import { maxLength, sortLength } from "@/utils/rules";

    export default {
        name: "operatorForm",
        components: { autoSearchOrg, searchDept, selectPerson,autoSearchResource,autoSearchDic },
        data() {
            return {
                form: this.clearForm(),
                rules: {
                    userName: [{ required: true, message: '请输入作业人员账户', trigger: 'blur' }, sortLength],
                    resourceName: [{ required: true, message: '请输入作业人员名称', trigger: 'blur' }, sortLength],
                    workTeamName: [{ required: true, message: '请选择所属作业班组', trigger: 'blur' }, sortLength],
                    professionName: [{ required: true, message: '请选择所属作业工种', trigger: 'blur' }, sortLength],
                    // pieceReckon: [{ required: true, message: '是否计件', trigger: 'blur' }],
                    orgId: [{ required: true, message: '请选择单位', trigger: 'change' }],
                    deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                    resourceDescribe: [maxLength]
                },
                dialogForm: false,
                isEdit: false,
            }
        },
        methods: {
            clearForm() {
                return {
                    id:"",
                    userName: "",
                    personId:"",
                    personName:"",
                    resourceCode: "",
                    resourceName: "",
                    orgId: '',
                    orgName: '',
                    deptId: "",
                    deptName: "",
                    workTeamId: "",
                    workTeamName: "",
                    professionId: "",
                    professionName: "",
                    postId: "",
                    postName: "",
                    postCode: "",
                    pieceReckon: false,
                    valid: true,
                    resourceDescribe: "",
                }
            },
            // 保存
            handleSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.isEdit ? this.handleToEdit() : this.handleToAdd()
                    } else {
                        this.$message({
                            message: '请检查表单',
                            type: 'error'
                        })
                    }
                })
            },
            // 新增
            handleToAdd() {
                addOperator(this.form).then(res => {
                    this.$message({ message: '新增成功!', type: 'success' })
                    this.dialogForm = false
                    this.$emit('load')
                })
            },
            // 编辑
            handleToEdit() {
                updateOperator(this.form.id, this.form).then(res => {
                    this.$message({ message: '编辑成功!', type: 'success' })
                    this.dialogForm = false
                    this.$emit('load')
                })
            },
            handleSelect() {
                this.$refs.selectPerson.dialogForm = true
                this.$nextTick(() => {
                    this.$refs.selectPerson.loadData()
                })
            },
            handleSelectPerson(item) {
                let form = JSON.parse(JSON.stringify(item))
                this.form.resourceName = form.name
                this.form.userName = form.userName
                this.form.personId = form.id
                this.form.personName = form.name
                this.form.orgId = form.org.id
                this.form.orgName = form.org.name
                this.form.deptId = form.dept.id
                this.form.deptName = form.dept.name
                this.form.workTeamName=''
                this.form.workTeamId=''
                this.form.professionId=''
                this.form.professionName=''
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$refs.form.resetFields()
                    this.isEdit = false
                    this.form = this.clearForm()
                    this.$emit('clear')
                }
            },
        },
    }
</script>

<style scoped>

</style>
